<template>
  <div>
    <a-spin tip="Loading..." :spinning="spinning">
      <div class="gutter-example" style="color: #fff">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="6">
            <div class="gutter-box" style="background: #8693f3">
              <h3 style="color: #fff">支出总额</h3>
              <p>同比上周增加 {{ (cHomeData.zc.ratio * 1).toFixed(2) }}%</p>
              <div
                style="text-align: center; font-weight: bold; font-size: 28px"
              >
                {{ cHomeData.zc.noWeek || 0 }}
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div
              class="gutter-box"
              style="
                background: #bc8dee;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>
                <h3 style="color: #fff">代发入库</h3>
                <p>
                  同比上周新增{{ (cHomeData.dfrk.percent * 1).toFixed(2) }}%
                </p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.dfrk.week }}笔
                </div>
              </div>
              <div>
                <h3 style="color: #fff">代发出库</h3>
                <p>
                  同比上周增加
                  {{ (cHomeData.dfck.percent * 1).toFixed(2) }}%
                </p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.dfck.weekOut }}笔
                </div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div
              class="gutter-box"
              style="
                background: #ffa897;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>
                <h3 style="color: #fff">转运入库</h3>
                <p>
                  同比上周新增{{ (cHomeData.zfrk.percent * 1).toFixed(2) }}%
                </p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.zfrk.transferIntoWeek }}笔
                </div>
              </div>
              <div>
                <h3 style="color: #fff">转运出库</h3>
                <p>
                  同比上周增加{{ (cHomeData.zfck.percent * 1).toFixed(2) }}%
                </p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.zfck.transferOutWeek }}笔
                </div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div
              class="gutter-box"
              style="
                background: #89c3f8;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>
                <h3 style="color: #fff">退件订单</h3>
                <p>
                  同比上周新增{{
                    cHomeData.tj ? (cHomeData.tj.percent * 1).toFixed(2) : ""
                  }}%
                </p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.tj ? cHomeData.tj.retreatWeek : "" }}笔
                </div>
              </div>
              <div>
                <h3 style="color: #fff">退件销毁</h3>
                <p>同比上周增加 {{ cHomeData.xh.percent }}%</p>
                <div
                  style="text-align: center; font-weight: bold; font-size: 28px"
                >
                  {{ cHomeData.xh.destructionWeek }}笔
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <h3 style="margin-top: 20px">运营分析</h3>
      <div
        style="
          display: flex;
          justify-content: space-between;
          text-align: center;
        "
      >
        <div style="flex: 1">
          <h3 style="">每月支出</h3>
          <MonthlyCount />
        </div>
        <div style="flex: 1">
          <h3>各业支出</h3>
          <Expenditure />
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          text-align: center;
        "
      >
        <div style="flex: 1">
          <h3>热销产品top.5库存</h3>
          <Repertory />
        </div>
        <div style="flex: 1">
          <h3>热销产品Top.5</h3>
          <Sales />
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { chome_date } from "@/apis/clientSide/Home/home";
import MonthlyCount from "@/components/clientSide/Home/MonthlyCount.vue";
import Expenditure from "@/components/clientSide/Home/Expenditure.vue";
import Repertory from "@/components/clientSide/Home/Repertory.vue";
import Sales from "@/components/clientSide/Home/Sales.vue";
export default {
  components: {
    MonthlyCount,
    Expenditure,
    Repertory,
    Sales,
  },
  created() {
    this.getHomeData();
  },
  data() {
    return {
      spinning: false,
      cHomeData: {
        dfck: { percent: 0, weekOut: 0 },
        dfrk: { percent: 0, week: 0 },
        tj: { percent: 0, retreatWeek: 0 },
        xh: { destructionWeek: 0, percent: 0 },
        zfck: { transferOutWeek: 0, percent: 0 },
        zfrk: { transferIntoWeek: 0, percent: 0 },
        zc: { noWeek: 0, ratio: 0 },
      },
    };
  },
  methods: {
    async getHomeData() {
      this.spinning = true;
      let { code, responseBody } = await chome_date();
      if (code === "200") {
        this.cHomeData = responseBody;
        this.spinning = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.gutter-example {
  padding-right: 10px;
}
.gutter-example > .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  border-radius: 5px;
  padding: 10px;
}
</style>